<template>
  <div>
    <div class="select3Wrap">
      <div v-show="dataslens > 0">
        <div class="select3Box">
          <div class="major-wrapper">
            <div class="majors flex-h">
              <div class="left">
                <span :class="num1 === index ? 'active1' : ''" v-for="(item, index) in sortdata" :key="index" @click="cli1(index)">{{ item.collegeName }}</span>
              </div>
              <div class="right flex1">
                <div class="majorName" @click="clikcDesc('univ', $index, its.majorCode, its.majorName)" v-for="(its, $index) in erziData" :key="$index">
                  <strong>{{ its.majorName }}</strong>
                  <span v-show="its.tags.length > 0">
                    <b v-for="i in its.tags" :key="i">{{ i }}</b>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="dataslens === 0">
        <div class="noDataImage">
          <img src="~/static/nothing/empty_meiyoushuju.png" alt="" />
          <div class="describe">抱歉，这个页面暂无数据~</div>
        </div>
      </div>
      <select-desc :showWho="whos" v-on:clearShowDesc="clearDesc" :showselect2="showsdesc" :mainsData="maDetailData" :majortitle="majortitles"></select-desc>
    </div>
    <!-- 结束 -->
  </div>
</template>

<script>
import { getInformation, academyMajorInfos } from '~/api/colleges'
import { getMajors } from '~/api/school'
import selectDesc from './descPopup'
import scrollerEdit from '~/components/scrollerEdit'
import ls from 'store2'
export default {
  props: {
    syStyle: Boolean,
    shows1: Boolean,
  },
  components: {
    selectDesc,
    scrollerEdit,
  },
  data() {
    return {
      majortitles: '',
      maDetailData: {},
      showsdesc: false,
      whos: '',
      num1: 0,
      num2: null,
      num3: 0,
      erziData: [],
      sunziData: [],
      sortdata: [],
      dataslens: 1,
    }
  },
  computed: {},
  mounted: function() {
    // this.$loading('open');
    this.showMajor()
  },
  destroyed() {
    window.removeEventListener('popstate', this.fun, false)
  },
  methods: {
    showAnBack() {
      if (this.commonJs.isTerminal() == 'isAndroid') {
        if (window.history && window.history.pushState) {
          history.pushState(null, null, document.URL)
          window.addEventListener('popstate', this.fun, false) //false阻止默认事件
        }
      }
    },
    fun() {
      this.showsdesc = false
      setTimeout(() => {
        this.removeback()
      }, 50)
    },
    removeback() {
      window.removeEventListener('popstate', this.fun, false)
    },
    handleTouchMove: function(e) {
      let poChange = e.changedTouches[0].pageY
    },

    showMajorDetail(ids) {
      getInformation({
        academyCode: this.commonJs.GetUrlParam('academyCode'),
        majorCode: ids,
      })
        .then((res) => {
          if (res.code === '0') {
            if (res.data) {
              this.maDetailData = res.data
            }
          }
        })
        .catch((error) => {
          this.$vux.toast.text('暂无数据')
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    showMajor() {
      getMajors({
        academyCode: this.commonJs.GetUrlParam('academyCode'),
      })
        .then((res) => {
          let objdata = res.data
          if (objdata.length > 0) {
            this.sortdata = res.data
            this.sortdata = this.sortdata.map((item) => {
              var academyMajorInfo = item.academyMajorInfoVos.map((i) => {
                if (i.tags) {
                  return {
                    majorName: i.majorName,
                    tags: JSON.parse(i.tags),
                  }
                } else {
                  return {
                    majorName: i.majorName,
                    tags: [],
                  }
                }
              })
              return {
                academyMajorInfoVos: academyMajorInfo,
                collegeName: item.collegeName,
              }
            })
            this.erziData = this.sortdata[0].academyMajorInfoVos
          } else {
            this.dataslens = 0
          }
        })
        .catch((error) => {
          this.$vux.toast.text('暂无数据')
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    clearDesc() {
      this.showsdesc = false
      this.removeback()
    },
    clikcDesc(sre, $index, ids, nsa) {
      this.$loading('open')
      this.num2 = $index
      this.whos = sre
      this.majortitles = nsa
      this.showMajorDetail(nsa)

      this.showsdesc = true
      this.commonJs.destr()
      setTimeout(() => {
        this.showAnBack()
      }, 10)
    },
    cli1(index) {
      this.num1 = index
      this.erziData = this.sortdata[index].academyMajorInfoVos
      this.num2 = null
    },
    cli2(index) {
      this.num2 = index
    },
  },
}
</script>

<style scoped lang="less">
.major-wrapper {
  width: 100%;
  height: auto;
  .majors {
    align-items: stretch;
    .left {
      width: 2.4rem;
      height: auto;
      background: rgba(247, 247, 250, 1);
      span {
        width: 100%;
        height: 1rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        background: rgba(247, 247, 250, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .active1 {
        background: #fff;
        color: @mainColor;
      }
    }
    .right {
      padding: 0 0.3rem;
      box-sizing: border-box;
      .majorName {
        strong,
        span {
          display: block;
        }
        strong {
          font-size: 0.28rem;
          font-family: 'PingFangSC-Semibold', PingFangSC;
          font-weight: 600;
          color: rgba(0, 0, 0, 1);
          height: 1rem;
          display: flex;
          align-items: left;
          justify-content: center;
          flex-direction: column;
          overflow: hidden;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        span {
          padding-top: 0.25rem;
          border-top: 0.01rem solid rgba(229, 232, 237, 1);
          b {
            display: inline-block;
            padding: 0.1rem 0.2rem;
            background: rgba(247, 247, 250, 1);
            font-size: 0.26rem;
            font-family: 'PingFangSC-Regular', PingFangSC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
            margin-right: 0.2rem;
            margin-bottom: 0.2rem;
            border-radius: 0.1rem;
          }
        }
      }
    }
  }
}
.select3Wrap {
  width: 7.5rem;
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.5rem;
  padding-top: 0.4rem;
  .select3Box {
    width: 100%;
    min-height: 5rem;
    height: auto;
  }
  .noDataImage {
    padding-top: 0;
    text-align: center;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
